<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <%
        String contextPath = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + contextPath + "/";
    %>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册爱旅游账号</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/pignose.tab.min.css"/>
    <link rel="stylesheet" href="css/register.css"/>

    <style type="text/css">
        .hint {
            font-size: 12px;
            float: right;
            padding-left: 4px;
            display: inline-block;
        }
    </style>
</head>

<body>
<div class="content">
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="phoneModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel1">
                        已给手机发送短信
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <%--×--%>
                    </button>
                </div>
                <div class="modal-body">
                    请注意查看
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">
                        确定
                    </button>
                    <%--<button type="button" class="btn btn-primary">--%>
                        <%--确定--%>
                    <%--</button>--%>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="emailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel2">
                        已给邮箱发送短信
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <%--×--%>
                    </button>
                </div>
                <div class="modal-body">
                    请注意查看
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">
                        确定
                    </button>
                    <%--<button type="button" class="btn btn-primary">--%>
                    <%--确定--%>
                    <%--</button>--%>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="isLoginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel3">
                        注册成功！
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <%--×--%>
                    </button>
                </div>
                <div class="modal-body">
                    立即登录？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">
                        等会登录
                    </button>
                    <button type="button" class="btn btn-primary" id="now_login">
                        确定
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <div class="article">
        <h2 style="color: white;font-weight: 700;">欢迎注册</h2>
        <div class="tab pignose-tab-mint tab">
            <ul>
                <li>
                    <a href="#">手机注册</a>
                    <div class="rg_layout">
                        <div class="rg_form clearfix">
                            <div class="rg_form_center">
                                <!--注册表单-->
                                <form id="registerFormByPhone">
                                    <table style="margin-top: -35px;margin-left: 75px;">
                                        <tr>
                                            <td class="td_left">
                                                <label for="username">昵&nbsp;&nbsp;称&nbsp;&nbsp;</label>
                                            </td>
                                            <td class="td_right" colspan="2">
                                                <input type="text" id="nickName" name="nickName"
                                                       placeholder="请输入昵称" onchange="checkName('nickName')"
                                                       onblur="checkName('nickName')" oninput="checkLen('nickName');">
                                            </td>
                                            <td>
                                                <img id="nickName_img" src="" style="padding-left: 5px;">
                                            </td>
                                            <td>
                                                <span id="nickName_err" class="hint"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="td_left">
                                                <label for="username">手机号&nbsp;&nbsp;</label>
                                            </td>
                                            <td class="td_right" colspan="2">
                                                <input type="text" id="phone" name="phone"
                                                       placeholder="可用于登录和找回密码" onchange="checkPhone()"
                                                       onblur="checkPhone()">
                                            </td>
                                            <td>
                                                <img id="phone_img" src="" style="padding-left: 5px;">
                                            </td>
                                            <td>
                                                <span id="phone_err" class="hint"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="td_left">
                                                <label for="password">密&nbsp;&nbsp;码&nbsp;&nbsp;</label>
                                            </td>
                                            <td class="td_right" colspan="2">
                                                <input type="password" id="pwd" name="password"
                                                       style="font-size: 25px;" placeholder="请设置登录密码"
                                                       onchange="checkPassword('pwd')"
                                                       onblur="checkPassword('pwd');pwd_hint_slide('pwd_hint_tr', 'pwd_hint_span')"
                                                       onfocus="pwd_hint_slide('pwd_hint_tr', 'pwd_hint_span')">

                                            </td>
                                            <td>
                                                <img id="pwd_img" src="" style="padding-left: 5px;">
                                            </td>
                                            <td>
                                                <span id="pwd_err" class="hint"></span>
                                            </td>
                                        </tr>
                                        <tr style="display: none;" id="pwd_hint_tr">
                                            <td></td>
                                            <td colspan="2">
                                                <span class="hint" id="pwd_hint_span" style="display: none;">不能包含空格，密码长度8~16，必须包含数字、字母、符号中至少两种</span>
                                            </td>
                                            <td colspan="2"></td>
                                        </tr>
                                        <tr>
                                            <td class="td_left">
                                                <label for="password" style="width: 110px;">确认密码&nbsp;&nbsp;</label>
                                            </td>
                                            <td class="td_right" colspan="2">
                                                <input type="password" id="repwd" style="font-size: 25px;"
                                                       placeholder="请确认密码" onchange="checkRepassword('pwd', 'repwd');"
                                                       onblur="checkRepassword('pwd', 'repwd');">
                                            </td>
                                            <td>
                                                <img id="repwd_img" src="" style="padding-left: 5px;">
                                            </td>
                                            <td>
                                                <span id="repwd_err" class="hint"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="td_left">
                                                <label for="password">验证码&nbsp;&nbsp;</label>
                                            </td>
                                            <td class="td_right2">
                                                <input type="text" id="verify" placeholder="请输入验证码">
                                            </td>
                                            <td class="td_right2">
                                                <input type="button" id="send_verify_btn" value="获取验证码" class="getVerify" onclick="sendVerifyToPhone();"/>
                                            </td>
                                            <td>
                                                <img id="verify_img" src="" style="padding-left: 5px;">
                                            </td>
                                            <td>
                                                <span id="verify_err" class="hint"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="td_right2" colspan="3">
                                                <input type="submit" value="注册"/>
                                            </td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td colspan="2">
                                                <input type="checkbox" id="agree"/><span
                                                    style="color: #000;">阅读并接受</span><a href="#">《爱旅游用户协议》</a>
                                            </td>
                                            <td>
                                                <img id="agree_img" src="" style="padding-left: 5px;">
                                            </td>
                                            <td>
                                                <span id="agree_err" class="hint"></span>
                                            </td>
                                        </tr>
                                    </table>
                                </form>
                            </div>
                        </div>
                    </div>
                </li>
                <div style="float: right;">
                    <span>已有账号？</span><a href="pages/common/login.jsp" class="direct_login">直接登录>></a>
                </div>
                <li>
                    <a href="#">邮箱注册</a>
                    <div class="rg_layout">
                        <div class="rg_form clearfix">
                            <div class="rg_form_center">
                                <!--注册表单-->
                                <form id="registerFormByEmail">
                                    <table style="margin-top: -35px;margin-left: 75px;">
                                        <tr>
                                            <td class="td_left">
                                                <label for="username">昵&nbsp;&nbsp;称&nbsp;&nbsp;</label>
                                            </td>
                                            <td class="td_right" colspan="2">
                                                <input type="text" id="nickName2" name="nickName"
                                                       placeholder="请输入昵称" onchange="checkName('nickName2')"
                                                       onblur="checkName('nickName2')" oninput="checkLen('nickName2');">
                                            </td>
                                            <td>
                                                <img id="nickName2_img" src="" style="padding-left: 5px;">
                                            </td>
                                            <td>
                                                <span id="nickName2_err" class="hint"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="td_left">
                                                <label for="username">邮&nbsp;&nbsp;箱&nbsp;&nbsp;</label>
                                            </td>
                                            <td class="td_right" colspan="2">
                                                <input type="text" id="email" name="email"
                                                       placeholder="可用于登录和找回密码" onchange="checkEmail()"
                                                       onblur="checkEmail()">
                                            </td>
                                            <td>
                                                <img id="email_img" src="" style="padding-left: 5px;">
                                            </td>
                                            <td>
                                                <span id="email_err" class="hint"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="td_left">
                                                <label for="password">密&nbsp;&nbsp;码&nbsp;&nbsp;</label>
                                            </td>
                                            <td class="td_right" colspan="2">
                                                <input type="password" id="pwd2" name="password"
                                                       style="font-size: 25px;" placeholder="请设置登录密码"
                                                       onchange="checkPassword('pwd2')"
                                                       onblur="checkPassword('pwd2');pwd_hint_slide('pwd_hint_tr2', 'pwd_hint_span2')"
                                                       onfocus="pwd_hint_slide('pwd_hint_tr2', 'pwd_hint_span2')">

                                            </td>
                                            <td>
                                                <img id="pwd2_img" src="" style="padding-left: 5px;">
                                            </td>
                                            <td>
                                                <span id="pwd2_err" class="hint"></span>
                                            </td>
                                        </tr>
                                        <tr style="display: none;" id="pwd_hint_tr2">
                                            <td></td>
                                            <td colspan="2">
                                                <span class="hint" id="pwd_hint_span2" style="display: none;">不能包含空格，密码长度8~16，必须包含数字、字母、符号中至少两种</span>
                                            </td>
                                            <td colspan="2"></td>
                                        </tr>
                                        <tr>
                                            <td class="td_left">
                                                <label for="password" style="width: 110px;">确认密码&nbsp;&nbsp;</label>
                                            </td>
                                            <td class="td_right" colspan="2">
                                                <input type="password" id="repwd2" style="font-size: 25px;"
                                                       placeholder="请确认密码" onchange="checkRepassword('pwd2', 'repwd2');"
                                                       onblur="checkRepassword('pwd2', 'repwd2');">
                                            </td>
                                            <td>
                                                <img id="repwd2_img" src="" style="padding-left: 5px;">
                                            </td>
                                            <td>
                                                <span id="repwd2_err" class="hint"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="td_left">
                                                <label for="password">验证码&nbsp;&nbsp;</label>
                                            </td>
                                            <td class="td_right2">
                                                <input type="text" id="verify2" placeholder="请输入验证码">
                                            </td>
                                            <td class="td_right2">
                                                <input type="button" class="getVerify" id="send_verify_btn2"
                                                       value="获取验证码" onclick="sendVerifyToEmial();"/>
                                            </td>
                                            <td>
                                                <img id="verify2_img" src="" style="padding-left: 5px;">
                                            </td>
                                            <td>
                                                <span id="verify2_err" class="hint"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="td_right2" colspan="3">
                                                <input type="submit" value="注册"/>
                                            </td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td colspan="2">
                                                <input type="checkbox" id="agree2"/><span
                                                    style="color: #000;">阅读并接受</span><a href="#">《爱旅游用户协议》</a>
                                            </td>
                                            <td>
                                                <img id="agree2_img" src="" style="padding-left: 5px;">
                                            </td>
                                            <td>
                                                <span id="agree2_err" class="hint"></span>
                                            </td>
                                        </tr>
                                    </table>
                                </form>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/pignose.tab.min.js"></script>
<script src="js/common.js" type="text/javascript"></script>
<script type="text/javascript" src="js/register.js"></script>


</body>

</html>